<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../source/css/toggle.css">
  <link rel="stylesheet" href="../source/css/style.css">
  <script src="../source/js/jquery.min.js"></script>
  <script src="../source/js/juicer.js"></script>
</head>

<body>
  <div id="wrapper">
    <!--   Sidebar -->
    <div id="aside"></div>
    <script type="text/javascript">
      $('#aside').load('./common/aside.html');
    </script>
    <!--   contens -->
    <div class="upload">
      <!-- header -->
      <div id="header"> </div>
      <script type="text/javascript">
        $('#header').load('./common/header.html');
      </script>
      <!-- shadow -->
      <div class="items-shodow" style="display:none">
      </div>
      <!-- midd contents -->
      <div class="searchSick container-fluid">
        <div class="row headerSearch">
          <div class="pull-right col-md-6 col-xs-12 search-wrap">
            <button class="pull-right searchBtn" id="btn">搜索</button>
            <input id="search_value" type="text" name="" class="pull-right form-control" value="恶心、呕吐" placeholder="请在此输入症状">
          </div>
        </div>
        <div class="row characterList">
          <div class="col-xs-12" id="hi">

          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <nav aria-label="Page" class="pull-right">
              <ul class="pagination">
                <li>
                  <a href="#" aria-label="Previous">
                   <span aria-hidden="true"><</span>
                 </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                  <a href="#" aria-label="Next">
                   <span aria-hidden="true">></span>
                    </a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
      <!-- footer -->
      <div id='footer'></div>
      <script type="text/javascript">
        $('#footer').load('./common/footer.html');
      </script>
    </div>
  </div>
  <script id="tpl" type="text/template">
    <table class="table">
      {@each list as item,index}
      <tr>
        <td class="character_list">${item.data[0]}</td>
        <td class="idItem">${item.id}</td>
        <td class="detail"><a>详情</a></td>
      </tr>
      {@/each}
    </table>
  </script>

  <script src="../source/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $('#btn').on('click', function() {
      var search_value = $("#search_value").val();
      $.get('http://localhost:3004/search', {
        // $.post('http://localhost:3000/search', {
        input: search_value
      }, function(data, status) {
        var tpl = document.getElementById("tpl").innerHTML;
        console.log(data);
        var html = juicer(tpl, data); //得到渲染结果，需要放到DOM元素中才能在页面中显示
        document.getElementById('hi').innerHTML = html;
        $("#hi .detail").on('click', function() {
          var character = $(this).prev('.idItem').html();
          console.log(character);
          $.get('http://localhost:3004/id', {
            character: character
          }, function(datas) {
            // var html = juicer(tpl, datas);
            document.getElementById('hi').innerHTML = datas;

          })
        })

      });
    })
  </script>
</body>

</html>
